<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" href="../../css/allBase.css">
    <link rel="stylesheet" href="../../css/dialog.css" />
    <link href="../../js/riqi/bootstrap.min.css" rel="stylesheet">
    <link href="../../js/riqi/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="../../js/riqi/daterangepicker-bs3.css" />
    <style>
	    #main1{
			width:98%!important;
			height:100%!important;
		}
    	.panel-body {
		    margin:2% auto;
		    width:100%;
		    padding-bottom: 0 auto;
			height:100%;
		
			margin-top: 0;
        }
        #btncx{
        	top: 0;
        }
    	.title1{
    		width: 100%;
    		height: 500px;
    		position: relative;
    	}
    	.title1 .tishi{
    		position: absolute;
    		top: 20px;
    		left: 170px;
    		color: red;
    	}
    	#main1{
    		width: 98%;
    		height: 470px;
    		margin-top: 0;
    	}
    	.classified-search{
    		margin-bottom: 0;
    	}
    	#main1 p{
    		font-size: 22px;
    		margin:0 ;
    		margin-bottom:2px;
    	}
    	#main1{
    /*		position: relative;
    		top: 0px;
    		color: red;*/
    	}
         #nrdvMsgBox{
			z-index: 99999;
		}
		#nrShowBolightBox{
			z-index: 9999;
		}
		.timerow td{
				text-align: center!important;
			}
			td:last-child{
				/*border-right:1px solid #ddd!important;*/
			}
			.mt-20{
				padding:10px 50px;
			}
           .tableBox{
        	    padding-top: 10px;
			    padding-bottom: 10px;
			    margin-left: 1%;
			    margin: 2% auto;
			    width: 98%;
			    /*min-height: 550px;*/
			    background-color: #fff;
			    box-shadow: 3px 3px 20px 3px #ddd;
			}
			.text-c{
				background: #55bde4;
			}
			.timerow td {
			    background: #fdfdfd!important;
			    color: #313B4B!important;
			    font-weight: 400!important;
			}
			.text-c td{
				color:#fff;
			}
			.paixu img,.paixu2 img,.paixu3 img{
			     transform:rotate(180deg);
			     cursor: pointer;
			}
    </style>
    <![endif]-->
    <title>结果</title>
</head>
<body>
	<div class="classifiedBox">
	     <div class="classified-search">
             <form class="form-horizontal" style="margin-bottom: 5px;">
                 <fieldset>
                  <div class="control-group">
                    <div class="controls">
                    <p style="float: left;line-height: 34px;">日期范围：</p>
                     <div class="input-prepend input-group" style="float: left;width:150px ;">
                     
                     	<span class="add-on input-group-addon">
                     		<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                     	</span>
                     	<input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-7-21 - 2017-7-21" /> 
                   </div>
                     <p class="meici" style="float:left;color:red;line-height: 34px;">（每次最多选取60天）</p>
                    </div>
                  </div>
                 </fieldset>
              </form>
	        <div class="product-classification">
	            <div class="productR">
	                产品分类：
	            </div>
	            <div class="productL">
	                
	                <!--<span id="pcagent" class="selected">pc客户端</span>
	                <span id="agent" class="selected">代理商版</span>-->
	                <span id="ying" class="selected">新版考试宝典</span>
                    <span id="allsingleproducts">全部单品</span>
	                <span id="zyyszcp">执业药师</span>
	                <span id="yxzcp">药学职称</span>
	                <span id="yjksp">医技考试</span>
	                <span id="zyysp">执业医师</span>
	                <span id="zyyssp">住院医师</span>
	                <span id="hlksp">护理考试</span>
	                <span id="zzzyp">主治中医</span>
	                <span id="zzysp">主治医师</span>
	                <span id="yxgjp">医学高级</span>
	                <br>
                    <span id="jsgjksbdp">技师高级职称</span>
	                <span id="jszjksbdp">技师中级职称</span>
	                <span id="jscjksbdp">技师(士)初级</span>
	                <span id="hlxgjzcksbdp">护理高级职称</span>
	                <span id="yxzjzcksbdp">医学中级职称</span>
	                <span id="cjhsksbdp">初级护师</span>
	                <span id="zghsksbdp">主管护师</span>
	                <span id="wkgjzcksbdp">外科高级职称</span>
	                <span id="wkzzysksbdp">外科主治医师</span>
	                <span id="nkgjzcksbdp">内科高级职称</span>
	                <span id="nkzzysksbdp">内科主治医师</span>
	                <span id="yxksbdp">医学</span>
	                <i>（*单选）</i>
	            </div>
	            <!--<div class="purchase-situation1">
	            版本选择：
	            <span class="selected">全部版本</span><span>精品题库</span><span>精讲课程班</span><span>无忧通关班</span><span>无忧协议班</span><span>精英定制班</span><span>密训私教班</span><i>（*单选）</i>
	        </div>-->
	        </div>
	    <div class="selection-classification">
	            <div class="selectionR">
	                功能选择：
	            </div>
	            <div class="selectionL">
	                <span id="进入支付页" class="selected">充值购买</span>
	                <span id="搜索" class="selected">搜索</span>
	                <span id="继续" class="selected">继续</span>
	                <!--<span id="签到" class="selected">签到</span>-->
	                <span id="分享" class="selected">分享</span>
	                <span id="章节练习" class="selected">章节练习</span>
	                <span id="智能测评" class="selected">智能测评</span>
	                <span id="智能练习" class="selected">智能练习</span>
	                <span id="模拟考试" class="selected">模拟考场</span>
	                <span id="直播间" class="selected">直播间</span>
	                <!--<span id="yxgjdbdbp">高级答辩</span>-->
	                <span id="考点精讲" class="selected">考点精讲</span>
	                <span id="错题精讲" class="selected">错题精讲</span>
	                <span id="真题精讲" class="selected">真题精讲</span>
	                <span id="押题密卷" class="selected">押题密卷</span>
	                <span id="考点冲刺包" class="selected">考前冲刺包</span>
	                <span id="错题重做" class="selected">错题重做</span>
	                <span id="我的收藏" class="selected">我的收藏</span>
	                <span id="我的笔记" class="selected">我的笔记</span>
	                <span id="排行榜" class="selected">排行榜</span>
	                <span id="考试指南" class="selected">考试指南</span>
	                <span id="客服中心" class="selected">客服中心</span>
	                <span id="我的科目" class="selected">我的科目</span>
	                <span id="答疑" class="selected">答疑</span>
	                <span id="我的页面里面的登录" class="selected">我的页面里面的登录</span>
	                <span id="我的消息" class="selected">我的消息</span>
	                <span id="系统通知" class="selected">系统通知</span>
	                <i>（*多选）</i>
	            </div>
	        </div>
	        <div class="purchase-situation">
	                    人群分类：
            <span class="selected" id="2">合计</span><span id="1">购买用户</span><span id="0">未购买的注册用户</span>（*单选）
	        </div>
	        <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
	        <!--<div class="refresh">
	            <img src="../../img/refresh.png" alt="">
	            <a class="tabReload" href="#">刷新当前</a>
	        </div>-->
	    </div>
    </div>
    <!--数据展示结果-->
    <img class="loadingimg" src="../../img/loading.gif" style="position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto;display: none;" />
    
    <div class="panel-body" style="display: none;">
    	<div class="titleNum"></div>
    	<div class="title" style="width:100%">
    		<ul class="title1" >
    			<p class="tishi">*点击量越大，展示模块越大(如展示为空，说明此功能数据为0)</p>
    			<li id="main1" class="main">
    				
    			</li>
    		</ul>
    	</div>
        
    </div>
    <!--数据展示结果-->
    <div class="tableBox" style="display: none;">
    	<div class="mt-20">
			<table id="reptable1" class="table table-border table-bordered table-bg table-hover table-sort" cellspacing="0" cellpadding="0">
				<thead class="thead1" >
					
				</thead>
				
			</table>
	    </div>
    </div>
    
    <script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
    <!--<script src="../js/charts/Chart.js"></script>-->
    <script type="text/javascript" src="../../js/base/echarts.common.min.js"></script>
    <script type="text/javascript" src="../../js/base/echarts.js"></script>
    <script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="../../js/base/ajax.js"></script>
    <script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>
    <script type="text/javascript" src="../../js/base/dialog.js"></script>
    <script type="text/javascript" src="../../js/riqi/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/riqi/moment.js"></script>
    <script type="text/javascript" src="../../js/riqi/daterangepicker.js"></script>

    <script type="text/javascript">
    	
	    var myDate = new Date();//添加日期
       	y=myDate.getFullYear(); 
       	m=myDate.getMonth()+1;
       	d=myDate.getDate()-1;
       	if(myDate.getDate()==1){
       		 d=myDate.getDate();
       	}
       	dqy=y+"-"+m+"-"+d;
       	$('#reservation').val(dqy+" - "+dqy)
               $(document).ready(function() {
                  $('#reservation').daterangepicker({
                        // startDate: moment().startOf('day'),  
                        //endDate: moment(),  
                        //minDate: '01/01/2012',    //最小时间  
                        maxDate : moment(), //最大时间   
                        dateLimit : {  
                            days : 60  
                        }, //起止时间的最大间隔  
                        showDropdowns : true,  
                        showWeekNumbers : false, //是否显示第几周  
                        timePicker : false, //是否显示小时和分钟  
                        timePickerIncrement : 60, //时间的增量，单位为分钟  
                        timePicker12Hour : false, //是否使用12小时制来显示时间  
                        ranges : {  
                            //'最近1小时': [moment().subtract('hours',1), moment()],  
                            '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                            '最近7日': [moment().subtract('days', 6), moment()],
                            '最近30日': [moment().subtract('days', 29), moment()],  
                            '最近60日': [moment().subtract('days', 59), moment()]  
                        },  
                        opens : 'right', //日期选择框的弹出位置  
                        buttonClasses : [ 'btn btn-default' ],  
                        applyClass : 'btn-small btn-primary blue',  
                        cancelClass : 'btn-small',  
                        format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式  
                        separator : ' - ',  
                        locale : {  
                            applyLabel : '确定',  
                            cancelLabel : '取消',  
                            fromLabel : '从',  
                            toLabel : '到',  
                            weekLabel: 'W',
                            customRangeLabel : '选择时间',  
                            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
                            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',  
                                    '七月', '八月', '九月', '十月', '十一月', '十二月' ]
//                          firstDay : 1  
                        }  
                    }, function(start, end, label) {//格式化日期显示框  
                        $('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));  
                    }); 
					
               });
       	$(document).on('click','.applyBtn',function(){//判断日期是否是在60天之内
       	    var val=$('#reservation').val().split(' - ');
          	var endTime=new Date(val[1]);
          	var startTime=new Date(val[0]);
          	if(endTime - startTime>5270400000){
          		$('.daterangepicker').css('display','block')
          		G_Prg.alert('每次最多选取60天');
          	}
       	})
        var clients = [];
		var hTimes = ["0点","1点","2点","3点","4点","5点","6点","7点","8点","9点",
    				"10点","11点","12点","13点","14点","15点","16点","17点","18点","19点",
    				"20点","21点","22点","23点"
    				];
		var hwChart;
		var swChart;
		var times=[];//两个日期之间的区间
        this.init = function(){
            var option = {};
            var dd=new Date();
            var m=dd.getMonth()+1;
            var d1=dd.getDate();
            var days1=G_Prg.GetDay(dd.getFullYear(),m,d1);
            var days2=  dd.getFullYear()+'-'+m+'-'+d1;
            $('#logmin').val(days1);
            $('#logmax').val(days1);
            allclick();//点击事件

        }

        /**************************************************
         * 功能：点击事件
         * 函数名：allclick（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-13
         *************************************************/
        function allclick() {
            //刷新页面
            $('.refresh').on('click',function(){
                window.location.reload();
            })
            //切换科目选项 (全选反选)
		
            $('.productL span').on('click',function(){
	           $(this).addClass('selected').siblings().removeClass('selected');
            })
        	$('.selectionL span').on('click',function(){//功能选择
			    if($(this).hasClass('selected')){
                   $(this).removeClass('selected');
                }else{
                   $(this).addClass('selected')
                }
			
            })
            $('.singleApp span').on('click',function(){
            	$('#allsingleproducts').removeClass('selected');
            	if($(this).hasClass('selected')){
                    $(this).removeClass('selected');
                }else{
                    $(this).addClass('selected');
                }
            })
            
            //切换情况选项
            $('.purchase-situation span').on('click',function(){
                if($(this).hasClass('selected')){
                    $(this).removeClass('selected');
                }else{
                    $(this).addClass('selected').siblings().removeClass('selected');
                }
            })
            $('.purchase-situation1 span').on('click',function(){
                if($(this).hasClass('selected')){
                    $(this).removeClass('selected');
                }else{
                    $(this).addClass('selected').siblings().removeClass('selected');
                }
            })
            //查询结果
            $('#btncx').on('click',function(){
	            var val=$('#reservation').val().split(' - ');
	            var startTime=new Date(val[0]);
	            var endTime=new Date(val[1]);
	            if(endTime-startTime<5270400000){
	                $('.loadingimg').show();
	            	$('.panel-body').hide();
	            	$('.tableBox').hide();
	            	setTimeout(function(){
	            		$('.panel-body').show();
	                    getLoginData();
	                    window.onresize = function () {
					        swChart.resize();
					    }
	            	},500)
	            }else{
	           		G_Prg.alert('每次最多选取60天');
	            }
            })
			
        }

        /**************************************************
         * 功能：数据绘图
         * 函数名：Canvas1（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-30
         *************************************************/
		function Canvas1(dataName,total){
		  	swChart = echarts.init(document.getElementById('main1'));
		  	var series=[];
		  	var trueRate = 0.00;
		  	var Item = function(){
		                    return {
		                        name:'',
		                        value:'',
		                        value2:'',
		                        rate:'',
		                    }
		                };
		  	for(var i=0;i<dataName.length;i++){
		  	 	if(dataName.length > 1){
		            var it = new Item();
		            if(dataName[i].name == '进入支付页'){
		            	dataName[i].name = '充值购买';
		            }
		            it.name = dataName[i].name;
		            it.value = dataName[i].data;
		            it.value2 = dataName[i].data2;
//		            if(dataName[i].rate == 'NaN'){
//		            	dataName[i].rate = trueRate;
//		            }
		            it.rate = dataName[i].data2/total;
		            series.push(it);// 将Itemsin放在series中
		        }
		  	 	
		  	}
			var option = {
	            tooltip : {
	                       show: true,
	                       trigger: 'item',
	                       //show: true,   //default true
	                       showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
	                       hideDelay: 20,//隐藏延时
                           transitionDuration: 0.2,//动画变换时长
	                       backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色（此时为默认色）
	                       borderRadius: 8,//边框圆角
	                       padding: 20,    // [5, 10, 15, 20] 内边距
	                       position: function (p) {
	                           return [p[0] + 10, p[1] - 10];
	                       },
	                       formatter: function (params,ticket,callback) {
	                          var res = '';  
				              var myseries = option.series;  
				              for (var i = 0; i < myseries.length; i++) {  
				                   for(var j=0;j<myseries[i].data.length;j++){  
				                        if(myseries[i].data[j].name==params.name){
				                        	   res+= "<p>"+parseInt(myseries[i].data[j].rate*100)+'%</p>'; dataName[i].data2/total
				                        	   res+= myseries[i].data[j].name+'<br/>';  
				                               res+=' 点击量: '+myseries[i].data[j].value2+'</br>';  
				                               res+=' 点击人数: '+myseries[i].data[j].value+'</br>';
				                         }  
				                   }         
				              }  
				              return res;  
	                       }
	        	},
	            grid: {
                    left: '0%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                    x:130
                },
	        	calculable : true,
		        series : [
		            {
		                name:"数据",
		                type:'treemap',
		                roam:false,
		                nodeClick:false,
		                drillDownIcon:false,
		                breadcrumb:false,//去下面提示
		                itemStyle: {
		                    normal: {
		                        label: {
		                            show: true,
		                            formatter: "{b}",
		                            textStyle:{
				                         // 用 itemStyle.normal.label.textStyle.fontSize 來更改餅圖上項目字體大小
				                         fontSize: 18
		                            }
		                        },
				                grid: {
	                                left: '50%',
	                                right: '4%',
	                                bottom: '3%',
	                                containLabel: true,
	                                x:130
	                            },
		                        borderWidth: 1
		                    },
		                    emphasis: {
		                        label: {
		                            show: true
		                        }
		                    }
		                },
		                data:series
		            }
		        ]
	  		};
			// 使用刚指定的配置项和数据显示图表。
			swChart.setOption(option);
		       
		}
            
        /**************************************************
         * 功能：所有单品的功能点击数据/api/new/userappvn
         * 接口：https://tongji.ksbao.com:8003
         * 函数名：getLoginData（）
         * 传入参数：startDay    开始时间
         *         endDay      结束时间
         *         clients     所选单品
         *         userType    购买未购买[0未购买、1购买、2合计]
         * 创建人：刘淳昊 2017-03-20
         *************************************************/
        function getLoginData(){
            var val=$('#reservation').val().split(' - ');
            var startTime = val[0];
            var endTime = val[1];
            clients=[];
            btnName=[];
            $('.productL .selected').each(function(){
            	clients.push($(this).attr('id'));
            });
            $('.selectionL .selected').each(function(){
            	btnName.push($(this).attr('id'));
            });
            $('.singleApp .selected').each(function(){
            	clients.push($(this).attr('id'));
            });
            getAll(startTime,endTime);
            var userType = $('.purchase-situation .selected').attr('id');
            var clientsData = clients;
            var appvn = $('.purchase-situation1 .selected').html();
            var btnName =JSON.stringify(btnName);
            var _url='/api/new/userappvnone?startDay='+startTime+'&endDay='+endTime+'&userType='+userType+'&client='+clientsData+'&appvn=全部版本&btnName='+btnName;
            G_AjaxApi.get(_url,false,function(json){
                var jsonData = JSON.parse(json);
                if(jsonData.status ==200){
                    if(jsonData.data.length == 0){
                        G_Prg.alert('数据为空');
                    }else{
                    	$('.titleNum').empty();
                    	var dataName=[];
                        for(var i=0;i<jsonData.data.length;i++){
                        	dataName.push(jsonData.data[i].name)
                        }
                        var _data = jsonData.data.data;
                        var _total = jsonData.data.total;
                        $('.loadingimg').hide();
                        Canvas1(_data,_total);
                        //表格图 
                        $('.loadingimg').hide();
                    	$('.tableBox').css('display','block');
                    	$('.thead1 tr').remove();
						var nowstr = '<tr class="text-c" style="padding:15px;"><td valign="middle" width="25%" style="padding:15px;">功能</td><td style="padding:15px;" valign="middle" width="25%">功能点击量占比<span class="paixu" style="margin-left:25px;"><img src="../../img/paixu.png"></td>'+
						'<td valign="middle" width="25%" style="padding:15px;">功能点击量<span class="paixu2" style="margin-left:25px;"><img src="../../img/paixu.png"></span></td><td valign="middle" width="25%" style="padding:15px;" >功能点击人数<span class="paixu3" style="margin-left:25px;"><img src="../../img/paixu.png"></span></td></tr>';
						$('.thead1').append(nowstr);

						for(var i =_data.length-1;i>=0;i--){
							var strTr= '<tr class="timerow">'+
										'<td valign="middle" style="padding:15px;">'+ _data[i].name +'</td>'+
										'<td valign="middle" style="padding:15px;">'+ (_data[i].data2/_total*100).toFixed(2)+'%' +'</td>'+
										'<td valign="middle" style="padding:15px;">'+ _data[i].data2+'</td>'+
										'</tr>';
							$('.text-c').after(strTr);
						}
						$(".timerow").each(function(i){
						    for(var j= 1;j<2;j++){
								var strTd ='<td valign="middle" style="padding:15px;">'+_data[i].data+'</td>';
								$(this).append(strTd);
							}
						});

                    }

                }else {
                    console.log(jsonData.status)
                }
            })
		    $(document).on('click','.paixu',function(){
		        dataSort(1,this)
		    })
		    $(document).on('click','.paixu2',function(){
		        dataSort(2,this)
		    })
		    $(document).on('click','.paixu3',function(){
		        dataSort(3,this)
		    })
		    function dataSort(num,data){
		    	var oTab=document.querySelector('.thead1');
		        var arr=[];
		        for(i=0;i<oTab.rows.length-1;i++){
		           arr[i]=oTab.rows[i+1]
		        }
				if($(data).attr("px") == 1){
					$(data).find('img').css({'transform':'rotate(180deg)'})
					 arr.sort(function(tr1,tr2){
						  var sub1=tr1.cells[num].innerHTML;
						  var sub2=tr2.cells[num].innerHTML;
						  if(num == 1){
						  	  var sub1=sub1.replace(/%/, "");
						      var sub2=sub2.replace(/%/, "");
						  }
					      var n1=parseFloat(sub1);  
					      var n2=parseFloat(sub2);
					      return n1-n2;
				     })
					$(data).attr("px",0);
				}else{
					$(data).find('img').css({'transform':'rotate(0deg)'})
					 arr.sort(function(tr1,tr2){
						  var sub1=tr1.cells[num].innerHTML;
						  var sub2=tr2.cells[num].innerHTML;
						  if(num == 1){
						  	  var sub1=sub1.replace(/%/, "");
						      var sub2=sub2.replace(/%/, "");
						  }
					      var n1=parseFloat(sub1);  
					      var n2=parseFloat(sub2);
					      return n2-n1;
				     })
					$(data).attr("px",1);
				}
			
		        for(i=0;i<arr.length;i++){
		          oTab.append(arr[i])
		        }
		    }
    }
            
        /**********************************************************
        * 功能：获取日期区间
        * ********************************************************/
        Date.prototype.format=function (){
		    var s='';
		    s+=this.getFullYear()+'-';          // 获取年份。
		    s+=(this.getMonth()+1)+"-";         // 获取月份。
		    s+= this.getDate();                 // 获取日。
		    return(s);                          // 返回日期。
		};
		function getAll(begin,end){
			times=[];
		    var ab = begin.split("-");
		    var ae = end.split("-");
		    var db = new Date();
		    db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
		    var de = new Date();
		    de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
		    var unixDb=db.getTime();
		    var unixDe=de.getTime();
		    for(var k=unixDb;k<=unixDe;){
			    times.push((new Date(parseInt(k))).format());
			    k=k+24*60*60*1000;
		    }
		}

        init();


    </script>
</body>
</html>